<template>
  <div>
    <div class="containerMask"></div>
    <van-tabbar :border="false" class="van-hairline--top" v-model="active" style="z-index: 10;">
      <van-tabbar-item name="Home" icon="home-o" to="/APP/Building/Home/Page">首页</van-tabbar-item>
      <van-tabbar-item name="Device" icon="setting-o" to="/APP/Device/Main/Page">设备</van-tabbar-item>
      <van-tabbar-item name="Message" icon="friends-o" :info="sensorInfoCount" to="/APP/Message/Main/Page">报警
      </van-tabbar-item>
      <van-tabbar-item name="Energy" icon="fire-o" to="/APP/Device/Energy/Page">能耗</van-tabbar-item>
      <van-tabbar-item name="User" icon="user-o" to="/APP/Building/User/Home/Page">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  export default {
    name: 'MenuEngine', /* 这个name暂时不知道用啥用，根据官方文档说的是方便排错的 */
    data() {
      return {
        octopus: this.$parent.octopus,
        active: "",
        sensorInfoCount: null,
      }
    },
    created: function () {
      this.init();

      this.octopus.tips.debug("AppMenuEngine执行了created事件。");
    },
    // 只会执行一次
    mounted: function () {
      // this.$nextTick(function () {
      //   this.octopus.tips.debug("[" + this.source.data.id + "] AppMenuEngine执行了$nextTick");
      // });
      // this.octopus.tips.debug("[" + this.source.data.id + "] AppMenuEngine执行了mounted事件。");
    },
    beforeUpdate: function () {
      // this.octopus.tips.debug("[" + this.source.data.id + "] AppMenuEngine执行了beforeUpdate事件。");
    },
    updated: function () {
      this.octopus.tips.debug("[AppMenuEngine执行了updated事件。");
    },
    // 活动事件，写在这里的好处是不管是第一次创建还是后退回来，都会触发这个事件
    // 比较典型的就是列表组件，返回的时候往往是需要刷新的。
    activated: function () {
      this.load();
      // this.$nextTick(function () {
      //   this.octopus.tips.debug("[" + this.source.data.id + "] AppMenuEngine执行了activated.$nextTick事件。");
      // });
      this.octopus.tips.debug("AppMenuEngine执行了activated事件。");
    },
    // 组件停用时，也就是切换出去的时候，需要注意的是，AppMenuEngine组件切换出去，不允许缓存，需要释放到初始状态，以便于下次进来。
    deactivated: function () {
      this.destroyData();
      this.octopus.tips.debug("AppMenuEngine执行了deactivated事件。");
    },
    computed: {
      // 如果cellData数据发生了改变,则触发这个事件。
      changeCell: function () {
        return this.source.id;
      },
      changePage: function () {

      }
    },
    methods: {
      init: function () {
        this.initData();
      },
      // 初始化数据，主要是还原#param等预设参数，重新绑定。
      initData: function () {

      },
      // 执行加载
      load: function () {
        let o = this;
        let modelurl = this.octopus.router.get().fullPath.toLocaleLowerCase();

        if (modelurl.indexOf("app/building/user") > -1) {
          this.active = "User";
        } else if (modelurl.indexOf("app/device/energy") > -1) {
          this.active = "Energy";
        } else if (modelurl.indexOf("app/device/main") > -1) {
          this.active = "Device";
        } else if (modelurl.indexOf("app/message") > -1) {
          this.active = "Message";
        } else {
          this.active = "Home";
        }


        // 查询未处理的报警数量
        // this.octopus.request.api.post("/Octopus/Engine/Item", {
        //     id: 200, // 消息数据源
        //     type: "SELECT",
        //     value: this.octopus.passport.project,
        //     cellData: [
        //       {name: "ID"},
        //       {name: "Count"},
        //     ],
        //     pageData: {
        //       index: 1, listSize: 10, rowSize: 99 // 最多返回99条。
        //     }
        //   },
        //   // 处理回调事件，通过分析data.status.code的状态来实现。
        //   function (data) {
        //     if (data.status.code == 200) {
        //       // o.$set(o.list.sensorInfo, "data", data.content);
        //       let count = o.octopus.tools.parseCell(data.content, "Count").defaultValue;
        //       o.sensorInfoCount = count > 0 ? count > 99 ? 99 : count : null;
        //
        //       ///当前的数量为null时候在前端直接转为0
        //       ///因为其他数据类型会出现不确定性，所以还是直接用string格式
        //       try {
        //         let tempNumberString = '';
        //         if(o.sensorInfoCount == null){
        //           tempNumberString = '0';
        //         }else{
        //           tempNumberString = o.sensorInfoCount+'';
        //         }
        //         if (window.webkit) {
        //           // console.log("执行iOS的交互");
        //           window.webkit.messageHandlers.setIconBadgeNumber.postMessage(tempNumberString);
        //         } else if (window.Android) {
        //           window.setIconBadgeNumber.setIconBadgeNumber(tempNumberString);
        //         }
        //       } catch(e) {}
        //
        //     } else {
        //       o.octopus.tips.error(data);
        //     }
        //     // 加载状态结束
        //     o.loading = false;
        //   });

        console.log(modelurl);

      },
      // 组件停用时把data修正回原始数据，其他属性因为不会变，所以不用还原。
      destroyData: function () {

      },
      // 控件数据变更事件
      change: function (new_cell, old_cell) {

      },
    },
    watch: {},
    props: ["changed"]
  }

</script>

/*  scoped的意思是这里的样式只对当前页面有效不会影响其他页面，还有可以设置lang="scss"就是支持css预编译，也就是支持sass或者less  */
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

</style>
